import React, { Component } from "react";
import { Link } from "react-router-dom";
import "./index.css";
import Header from "../header/index";
import Tips from "../tips/index";
import Sinzk from "@sinzk/machine";

export class Home extends Component {
  state = {
    listener: 0,
    isError: false,
    errorText: "无可用打印机"
  };
  render() {
    return (
      <div className="App">
        <Header></Header>
        <Tips errorText={this.state.errorText} isError={this.state.isError} />
        <header className="App-header">
          <div className="row">
            <Link to="/idcard">
              <div className="child">
                <svg className="icon" aria-hidden="true">
                  <use xlinkHref="#icon-shenfenzheng"></use>
                </svg>
                <p className="child-title">身份证复印</p>
              </div>
            </Link>
            <Link to="/home">
              <div className="child">
                <svg className="icon" aria-hidden="true">
                  <use xlinkHref="#icon-Font_Linear"></use>
                </svg>
                <p className="child-title">文字复印</p>
              </div>
            </Link>
            <div className="child">
              <svg className="icon" aria-hidden="true">
                <use xlinkHref="#icon-tupian"></use>
              </svg>
              <p className="child-title">图片复印</p>
            </div>
            <div className="child">
              <svg className="icon" aria-hidden="true">
                <use xlinkHref="#icon-Upan"></use>
              </svg>
              <p className="child-title">U盘复印</p>
            </div>
            <div className="child">
              <svg className="icon" aria-hidden="true">
                <use xlinkHref="#icon-wenjianjia"></use>
              </svg>
              <p className="child-title">双排复印</p>
            </div>
          </div>
          <div className="row">
            <div className="child">
              <svg className="icon" aria-hidden="true">
                <use xlinkHref="#icon-APPmoban"></use>
              </svg>
              <p className="child-title">模板打印</p>
            </div>
            <div className="child">
              <svg className="icon" aria-hidden="true">
                <use xlinkHref="#icon-falv"></use>
              </svg>
              <p className="child-title">法律小崇</p>
            </div>
            <div className="child">
              <svg className="icon" aria-hidden="true">
                <use xlinkHref="#icon-tubiaozhizuomoban-"></use>
              </svg>
              <p className="child-title">立案预审</p>
            </div>
            <div className="child">
              <svg className="icon" aria-hidden="true">
                <use xlinkHref="#icon-weixin"></use>
              </svg>
              <p className="child-title">微信扫码打印</p>
            </div>
          </div>
          <p>版本号：1.0.0</p>
        </header>
      </div>
    );
  }

  private listenPrintStatus() {
    const time = window.setInterval(async () => {
      const info = await Sinzk.PrintSystem.info;
      if (info) {
        this.setState({
          isError: !(info.length > 0 && info[0].status === "空闲")
        });
        if (info.length > 0) {
          this.setState({
            errorText: info[0].status
          });
        }
      }
    }, 2000);
    this.setState({
      listener: time
    });
  }

  componentDidMount() {
    // this.listenPrintStatus();
  }
}

export default Home;
